import React from "react";
const Comment = () => {
    React.useEffect(()=>{
        getRoomData()
    },[])

    const back = () => {
        React.navigate(-1)
    }

    const busid = React.Business.id
    const [hasMore, setHasMore] = React.useState(true)
    const [page, setPage] = React.useState(1)
    const [limit, setLimit] = React.useState(10)

    // 接收rid
    const [useSearchParams] = React.Router.useSearchParams()
    const [rid, setRid] = React.useState(useSearchParams.get("rid"))
    const [comment, setComment] = React.useState([])

    // 获取房间信息
    const [room,setRoom] = React.useState({
        name:""
    })

    const getRoomData = async () => {
        let result = await React.HTTP.post("/room/info", { rid })
        if (result.code == 1) {
            setRoom(result.data)
        } else {
            React.error(result.msg, () => {
                React.navigate(-1)
            })
            return false
        }
    }

    // 下拉刷新
    const onRefresh = async () => {
        setHasMore(true)
        setPage(1)
        setComment([])
        loadMore()
    }

    // 上拉加载
    const loadMore = async () => {
        let result = await React.HTTP.post("/room/commentAll", { rid, page, limit })
        if (result.code == 1) {
            setHasMore(true)
            setPage(page + 1)
            setComment(comment.concat(result.data))
        } else {
            setHasMore(false)
            return false
        }
    }

    return (<>
        <React.UI.NavBar
            onBack={back}
            style={{ background: `rgb(55, 68, 134)`, color: '#fff' }}
        >{room.name+"评论"}
        </React.UI.NavBar>
        <React.UI.PullToRefresh onRefresh={onRefresh}>
            <div id="comment" className="comment">
                {/* <div className="title">{room.name}的评价</div> */}
                <React.UI.List className="list">
                    {comment.map((item: any, index: number) => (
                        <React.UI.List.Item
                            key={index}
                            prefix={
                                <React.UI.Image
                                    src={item.business.avatar_text}
                                    style={{ borderRadius: 20 }}
                                    fit='cover'
                                    width={40}
                                    height={40}
                                />
                            }
                            description={item.comment}
                        >
                            {item.business.nickname}
                        </React.UI.List.Item>
                    ))}
                </React.UI.List>
            </div>
            <React.UI.InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </React.UI.PullToRefresh>

    </>)
}

export default Comment